<template>
  <div class="mobile-header">
    <div class="header-logo" @click="handleClickTo">
      <img src="@/assets/image/SVG/AISEO_LOGO.svg" alt="logo" />
    </div>
    <div class="header-menu" v-show="!isshowMenu && !isshowLogin">
        <img @click="isshowLogin = true" src="@/assets/image/mobile/avatar.png" alt="个人中心">
        <img @click="isshowMenu = true"  src="@/assets/image/mobile/menu.png" class="ml-8" alt="tab切换">
      <!-- <el-icon @click="isshowLogin = true"><Avatar /></el-icon> -->
      <!-- <el-icon @click="isshowMenu = true" class="ml-8"><Expand /></el-icon> -->
    </div>
    <el-icon
      @click="
        () => {
          isshowMenu = false;
          isshowLogin = false;
        }
      "
      size="24"
      v-show="isshowMenu || isshowLogin"
      ><CloseBold
    /></el-icon>
    <div
      v-show="isshowLogin"
      class="popbox login-register-box"
      :class="{ isshow: isshowLogin }"
    >
      <div class="register" @click="goLogin">注册</div>
      <div class="login mt-16" @click="goLogin">登录</div>
      <p class="phone-number mt-12">售前电话：028-65221233</p>
    </div>
    <div
      v-show="isshowMenu"
      class="popbox header-tab-box"
      :class="{ isshow: isshowMenu }"
    >
      <div
        class="header-tab-item"
        :class="{ 'item-active': item.name === meta.pageName }"
        v-for="(item, index) in homeTabList"
        :key="index"
        @click="handleOpenRouter(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import EventBus from "@/utils/eventBus.js";
import { Avatar, Expand, CloseBold } from "@element-plus/icons-vue";

const isshowMenu = ref(false);
const isshowLogin = ref(false);
const handleCopy = (text) => {
  EventBus.emit("openToastBox", ["已复制到剪切板！", text]);
};
const route = useRoute();
const router = useRouter();
const meta = route.meta;
const goLogin = () => {
  router.push("/login");
};
const handleOpenRouter = (item) => {
  router.push(item.router);
};

const homeTabList = ref([
  {
    name: "首页",
    router: "/",
  },
  {
    name: "文字撰写",
    router: "/writingtext",
  },
  {
    name: "SEO定制",
    router: "/seoCustomer",
  },
  {
    name: "软文推广",
    router: "/softArticlePromotion",
  },
  {
    name: "网站优化",
    router: "/websiteOptimization",
  },
  {
    name: "网站联运",
    router: "/websiteIntermodalTransportation",
  },
  // {
  //   name: "新闻资讯",
  // },
  {
    name: "关于我们",
    router: "/aboutus",
  },
]);
const handleClickTo = () => {
  router.push("/");
  EventBus.emit("clicktoTop");
};
</script>

<style lang="scss" scoped>
.mobile-header {
  height: 44px;
  width: 100%;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  .header-logo {
    width: 88px;
    height: 22px;
    img {
      width: 88px;
      height: 22px;
    }
  }
  .header-menu {
    img{
        width: 32px;
        height: 32px;
    }
  }
//   .el-icon {
//     font-size: 20px;
//   }
  .popbox {
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border-top: 1px solid #d9d9d9;
    z-index: 3;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  }
  //   .isshow{
  //     opacity: 1;
  //     height: 200px;
  //     transition: height 0.3s ease-in-out;
  //   }
  .login-register-box {
    padding: 16px 30px;
    box-sizing: border-box;
    width: 100%;
    line-height: 40px;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    .register {
      background: #e62e3d;
      color: #ffffff;
    }
    .login {
      border: 1px solid #e62e3d;
      color: #e62e3d;
    }
    .phone-number {
      font-weight: 400;
      font-size: 14px;
      color: #1a1a1a;
      line-height: 14px;
      text-align: left;
    }
  }
  .header-tab-box {
    .header-tab-item {
      text-align: center;
      line-height: 48px;
      font-weight: 400;
      font-size: 16px;
      color: #1a1a1a;
      border-bottom: 1px solid #d9d9d9;
    }
    .item-active {
      color: #e62e3d;
      position: relative;
      &::after{
        content: "";
        width: 63px;
        height: 1px;
        background: #e62e3d;
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
